<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="renderer" content="webkit">
		<link href="../../css/bootstrap.min.css" rel="stylesheet">
		<script src="../../js/jquery-easyui-1.4.4/jquery.min.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script src="../../js/Chart.min.js"></script>
		<link rel="stylesheet" href="../../css/style.css">
		<title>统计图</title>
	</head>

	<body>
		<script>
			$(function() {
				var name = "w";
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					searchForm(r[2]);
				}
			});

			function searchForm(ttt) {
				$('#chart').attr('width', ttt);
				$('#chart').attr('height', 300 - 4);
				var dateArray = ['水晶吊灯奢华欧式', '欧式吊灯客厅灯具', '简约餐厅灯炫彩吊灯', '美式全铜吊灯', '豪华蜡烛水晶灯', '大气吊灯客厅灯', '客厅灯餐厅吊灯', '餐厅灯吊灯简约创意', '复古铁艺美式乡村吊灯', '水晶欧式吊灯'];
				var count = [490, 444, 432, 399, 356, 332, 300, 265, 247, 222];
				var data = {
					labels: dateArray,
					datasets: [{
						fillColor: '#8DB6CD',
						strokeColor: '#8DB6CD',
						data: count
					}]
				};
				var canLength = dateArray.length * 80;
				if (canLength > ttt) {
					canLength = ttt;
				}
				var canvas = $('#chart').get(0);
				canvas.width = canLength;
				var chart = canvas.getContext('2d');
				new Chart(chart).Bar(data);
			}
		</script>
		<div style="text-align: center; width: 100%;">
			<canvas id="chart"></canvas>
		</div>
	</body>

</html>